<template>
  <div>哈哈</div>
  <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>

<script setup>
import { Editor as ClassicEditor } from 'ckeditor5-custom-build/build/ckeditor'
import { onMounted, ref } from 'vue'

const editor = ClassicEditor
const editorData = ref('')

const editorConfig = {
  // The configuration of the editor.
  toolbar: {
    items: [
      'undo',
      'redo',
      '|',
      'findAndReplace',
      'selectAll',
      '|',
      'heading',
      '|',
      'removeFormat',
      'bold',
      'italic',
      'strikethrough',
      'underline',
      'code',
      'subscript',
      'superscript',
      '|',
      'specialCharacters',
      'horizontalLine',
      'pageBreak',
      '|',
      '-',
      'highlight',
      'fontSize',
      'fontFamily',
      'fontColor',
      'fontBackgroundColor',
      '|',
      'link',
      'blockQuote',
      'insertTable',
      'uploadImage',
      // 'codeBlock',//代码块
      // 'htmlEmbed',//html源码
      '|',
      'bulletedList',
      'numberedList',
      'todoList',
      '|',
      'outdent',
      'indent',
      'alignment',
      '|',
      // 'textPartLanguage',
      '|',
      'sourceEditing'
    ],
    shouldNotGroupWhenFull: false
  },
  heading: {
    options: [
      { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
      { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
      { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
      { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
      { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
      { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
      { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
    ]
  }
}
</script>
